<template>
 <div class="examContainer">
   <p class="p1">认识自我</p>
   <p>战胜自我</p>
   <p>超越自我</p>
   <div class="choose">
<!--     <picker @change="gradePickerChange" :value="gradeIndex" :range="grade">-->
<!--       <view class="picker">已选年级：{{ grade[gradeIndex] }}<span> > </span></view>-->
<!--     </picker>-->
     <picker @change="subjectPickerChange" :value="subjectIndex" :range="subject">
       <view class="picker">已选科目：{{ subject[subjectIndex] }}<span> > </span></view>
     </picker>
<!--     <picker @change="difficultyPickerChange" :value="difficultyIndex" :range="difficulty">-->
<!--       <view class="picker">已选难度：{{ difficulty[difficultyIndex] }}<span> > </span></view>-->
<!--     </picker>-->
   </div>
   <button @click="startTest" class="btn">开始考试</button>
  </div>
</template>

<script>
import globalStore from "../../stores/global-store";
export default {
  data () {
    return {
      // gradeIndex: 0,
      // grade: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级'],
      subjectIndex: 0,
      subject: ['语文', '数学', '英语'],
      // difficultyIndex: 0,
      // difficulty: ['简单','一般','困难'],
      examChoose: ['语文']
    }
  },
  onLoad (options){
    //清空数据
    Object.assign(this.$data, this.$options.data())
  },
  methods: {
    // gradePickerChange (e) {
    //   console.log(e)
    //   console.log(e.mp.detail.value)
    //   this.$set(this,'gradeIndex',e.mp.detail.value)
    //   this.$forceUpdate()
    //   this.examChoose[0] = this.grade[e.mp.detail.value]
    // },
    subjectPickerChange (e) {
      // console.log(e)
      this.$set(this,'subjectIndex',e.mp.detail.value)
      this.$forceUpdate()
      this.examChoose[0] = this.subject[e.mp.detail.value]
    },

    startTest () {
      // globalStore.state.examType[1] = this.examChoose[0];
      globalStore.state.examType[2] = this.examChoose[0];
      // globalStore.state.examType[3] = this.examChoose[1];
      console.log(globalStore.state.examType);
      wx.navigateTo({
        url: '/pages/examList/main'
      })
    }
  }
}
</script>

<style scoped>
.examContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.examContainer p{
  font-size: 20px;
  color: #669999;
  margin: 10px auto;
}
.p1 {
  padding-top: 30px;
}
.choose {
  padding-top: 80px;
  margin: 0 80px 0 80px;
}
picker{
  border-radius: 8px;
  overflow: hidden;
  background-color: White;
  border: 1px solid #CCCCCC;
}
.choose picker .picker{
  padding: 10px 15px;
  font-size: 18px;
  color: #02a774;
}
.choose view span {
  float: right;
  color: crimson;
}
.btn {
  display: inline-block;
  width: 250px;
  background: #CCFFFF;
  margin-top: 80px;
}
</style>
